<nz-card>
  <div class="seach-wrap">
    <div class="seach-rt">
      <div class="seach-item">
        <label class="seach-item-label">举报原因：</label>
        <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="seachParams.reason">
          <nz-option
            *ngFor="let item of reasonOptions"
            [nzLabel]="item.label"
            [nzValue]="item.label">
          </nz-option>
        </nz-select>
      </div>
  
      <div class="seach-btns">
        <nz-space>
          <button *nzSpaceItem nz-button nzType="primary" (click)="queryData()">查询</button>
          <button *nzSpaceItem nz-button (click)="resetData()">重置</button>
        </nz-space>
      </div>
    </div>
  </div>
  
  <main class="pagination-wrap-position">
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
          #basicTable
          nzSize="small"
          nzShowSizeChanger
          nzShowQuickJumper
          nzOuterBordered
          [nzFrontPagination]="false"
          [nzLoadingDelay]="100"
          [nzLoading]="tableForms.tableLoading"
          [nzData]="tableData"
          [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
          [nzTotal]="tableForms.total"
          [nzPageIndex]="tableForms.page"
          [nzPageSize]="tableForms.pageSize"
          [nzShowTotal]="totalTemplate"
          (nzPageIndexChange)="onPageIndexChange($event)"
          (nzPageSizeChange)="onPageSizeChange($event)"
        >
          <thead>
            <tr>
              <th nzAlign="center" nzWidth="120px">举报人ID</th>
              <th nzAlign="center">举报人昵称</th>
              <th nzAlign="center">举报原因</th>
              <th nzAlign="center">举报理由</th>
              <th nzAlign="center">举报时间</th>
            </tr>
          </thead>
  
          <tbody>
            <tr *ngFor="let data of basicTable.data; let index = index;">
              <td nzAlign="center">{{ data.userId }}</td>
              <td nzAlign="center">{{ data.userName || '-' }}</td>
              <td nzAlign="center">{{ data.reason || '-' }}</td>
              <td nzAlign="center">{{ data.description || '-' }}</td>
              <td nzAlign="center">{{ data.reportTime || '-' }}</td>
            </tr>
          </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
    </div>
  </main>
</nz-card>